<template>
  <div class="map_box">
    <baidu-map class="map" :center="{ lng: lng, lat: lat }" :zoom="10">
      <bm-marker
        :position="{ lng: lng, lat: lat }"
        animation="BMAP_ANIMATION_BOUNCE"
      ></bm-marker>

      <div class="map_list">
        <ul class="list">
          <li
            v-for="(item, index) in list"
            :key="index"
            @click="onclick(item)"
            :class="[keyword == item ? 'onli' : '']"
          >
            {{ item }}
          </li>
        </ul>
        <bm-local-search
          :keyword="keyword"
          :bounds="bounds"
          :auto-viewport="true"
          :panel="true"
          :pageCapacity="5"
        ></bm-local-search>
        <bm-polygon :path="polygonPath"></bm-polygon>
      </div>
    </baidu-map>
  </div>
</template>

<script>
export default {
  props: ["lng", "lat"],
  data() {
    return {
      list: ["地铁", "医院", "公交", "娱乐", "银行", "教育"],
      // location: {
      //   lng: 116.404,
      //   lat: 39.915
      // },
      keyword: "地铁",
      pStart: {
        lng: 116.314625,
        lat: 39.961627
      },
      pEnd: {
        lng: 116.347474,
        lat: 39.978609
      }
    };
  },
  watch: {
    lng(val) {
      console.log("111");
      let lng = this.lng - 0.2;
      let lng1 = this.lng + 0.2;
      let lat = this.lat - 0.2;
      let lat1 = this.lat + 0.2;
      this.pStart.lng = lng;
      this.pStart.lat = lat;
      this.pEnd.lng = lng1;
      this.pEnd.lat = lat1;
    }
  },
  computed: {
    bounds() {
      // console.log(this.$props);
      // console.lat(this.lat, this.lng);
      const { pStart, pEnd } = this;
      return {
        sw: { lng: pStart.lng, lat: pStart.lat },
        ne: { lng: pEnd.lng, lat: pEnd.lat }
      };
      this.searchcomplete();
    },
    polygonPath() {
      const { pStart, pEnd } = this;
      return [
        { lng: pStart.lng, lat: pStart.lat },
        { lng: pEnd.lng, lat: pStart.lat },
        { lng: pEnd.lng, lat: pEnd.lat },
        { lng: pStart.lng, lat: pEnd.lat }
      ];
    }
  },
  mounted() {},
  methods: {
    onclick(val) {
      this.keyword = val;
    },
    searchcomplete(val) {
      console.log(val);
    }
  }
};
</script>
<style lang="less" scoped>
.map_box {
  width: 100%;
  height: 540px;
  position: relative;
  .map {
    height: 540px;
  }
}
.map_list {
  position: absolute;
  width: 319px;
  background: #ffffff;
  border-radius: 6px;
  top: 30px;
  right: 30px;
  .list {
    height: 50px;
    overflow: hidden;
    li {
      float: left;
      width: 16.65%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      cursor: pointer;
      background: #f1f3f5;
    }
    .onli {
      background: #fff;
      border-top: 3px solid #f57f57;
    }
  }
}
</style>
